---
name: useFullscreen
route: /useFullscreen
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';


# useFullscreen

一个用于处理 dom 全屏的 Hook

## 代码演示

### 基本用法

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='基本用法' description='使用 ref 设置需要全屏的元素'>
  <Demo1 />
</JackBox>

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='懒加载' description='传入 function 来监听任意的 dom 节点'>
  <Demo2 />
</JackBox>

## API

```
const {
   isFullscreen,
   setFull,
   exitFull,
   ref?,
} = useFullScreen({
  dom?,
  onExitFull?,
  onFull?,
});
```

### Result

| 参数     | 说明                                     | 类型       |
|----------|------------------------------------------|------------|
| isFullscreen  | 是否全屏                          | boolean    |
| setFull  | 设置全屏                          | ()=>void    |
| exitFull  | 退出全屏                          | ()=>void    |
| toggleFull  | 切换全屏                          | ()=>void    |
| ref     | 当未传入 dom 参数时，将 ref 绑定给需全屏的节点      | -        |

### Options

| 参数    | 说明                                         | 类型                   | 默认值 |
|---------|----------------------------------------------|------------------------|--------|
| dom | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |
| onExitFull | 监听退出全屏  | ()=>void | -      |
| onFull | 监听全屏  | ()=>void | -      |